<!--
/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-03-28 23:11
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <div
    :key="data.id"
    class="x-render-drag-table-item x-render-drag-table-drag-item"
    :class="{'x-render-drag-table-item-active':xDesignTable.currentId === data.id}"
    @click.stop.prevent="xDesignTable.currentId = data.id"
  >
    <span>{{ data.title }}</span>
    <div v-if="data.dataIndex !== 'index'">
      <a-tooltip placement="top" title="复制">
        <a-button
          key="copy"
          icon="copy"
          type="link"
          size="small"
          style="color:#f44;"
          @click.stop.prevent="$emit('copy',data)"
        />
      </a-tooltip>
      <a-tooltip placement="top" title="删除">
        <a-button
          key="delete"
          icon="delete"
          type="link"
          size="small"
          style="color:#f44;"
          @click.stop.prevent="$emit('remove',data)"
        />
      </a-tooltip>
    </div>
  </div>
</template>

<script>
export default {
  name: 'XRenderColumnItem',
  inject: ['xDesignTable'],
  props: {
    data: {
      type: Object
    }
  }
}
</script>

<style scoped lang="css">
.x-render-drag-table-item {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  border: 1px solid #409eff;
  margin: 4px;
  padding: 4px;
  min-width: 200px;
  min-height: 30px;
}


.x-render-drag-table-item-active {
  border: 1px dashed #409eff;
}

</style>
